﻿<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Item Revealer | Demo 1 | </title>
<meta name="description" content="Revealing and unrevealing items with animated SVG paths using anime.js" />
<meta name="keywords" content="cover, reveal, grid, svg, animated, path, mask, image" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
</head>
<body class="demo-1">
<svg class="hidden">
<defs>
<symbol id="icon-arrow" viewBox="0 0 32 32">
<title>arrow</title>
<path class="path1" d="M7.333 24c-0.133 0-0.4 0-0.533-0.133l-6.667-6.667c0 0-0.133-0.133-0.133-0.267s0-0.133 0-0.267c0 0 0 0 0 0 0-0.133 0-0.133 0-0.267s0.133-0.133 0.133-0.267l6.667-6.667c0.4-0.133 0.8-0.133 1.067 0s0.267 0.667 0 0.933l-5.6 5.6h29.067c0.4 0 0.667 0.267 0.667 0.667s-0.267 0.667-0.667 0.667h-29.067l5.467 5.467c0.267 0.267 0.267 0.667 0 0.933 0 0.267-0.267 0.267-0.4 0.267z"></path>
</symbol>
<symbol id="icon-drop" viewBox="0 0 32 32">
<title>drop</title>
<path class="path1" d="M17.333 32c-5.867 0-10.667-4.8-10.667-10.667 0-5.6 9.733-20.4 10.133-21.067 0.267-0.4 0.8-0.4 1.067 0 0.4 0.667 10.133 15.467 10.133 21.067 0 5.867-4.8 10.667-10.667 10.667zM17.333 1.867c-2.133 3.333-9.333 14.933-9.333 19.467 0 5.2 4.133 9.333 9.333 9.333s9.333-4.133 9.333-9.333c0-4.533-7.2-16.133-9.333-19.467z"></path>
<path class="path2" d="M13.333 26.533c-0.133 0-0.267 0-0.4-0.133-1.467-1.333-2.267-3.2-2.267-5.067 0-1.6 1.2-4.533 3.467-8.933 0.133-0.4 0.533-0.533 0.933-0.267 0.267 0.133 0.4 0.533 0.267 0.933-2.133 4-3.333 6.933-3.333 8.267 0 1.467 0.667 2.933 1.733 4 0.267 0.267 0.267 0.667 0 0.933 0 0.133-0.267 0.267-0.4 0.267z"></path>
</symbol>

<symbol id="icon-nav" viewbox="0 0 129 129">
<title>nav</title>

<path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z" />
</symbol>
<symbol id="icon-cross" viewbox="0 0 129 129">
<title>cross</title>

<path d="M7.6,121.4c0.8,0.8,1.8,1.2,2.9,1.2s2.1-0.4,2.9-1.2l51.1-51.1l51.1,51.1c0.8,0.8,1.8,1.2,2.9,1.2c1,0,2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8L70.3,64.5l51.1-51.1c1.6-1.6,1.6-4.2,0-5.8s-4.2-1.6-5.8,0L64.5,58.7L13.4,7.6C11.8,6,9.2,6,7.6,7.6s-1.6,4.2,0,5.8l51.1,51.1L7.6,115.6C6,117.2,6,119.8,7.6,121.4z" />
</symbol>
</defs>
</svg>
<main>
<div class="grid-pages">
<div class="grid grid--vertical grid--current grid--style-1" data-path-cover="M 0,0 L 0,0 C 0,0 0,0 0,5 C 0,10 0,10 0,10 L 0,10 Z;M 0,0 L 0,0 C 0,0 5,0 5,5 C 5,10 0,10 0,10 L 0,10 Z;M 0,0 L 10,0 C 10,0 10,0 10,5 C 10,10 10,10 10.1,10 L 0,10 Z" data-path-uncover="M 0,0 L 10,0 C 10,0 10,0 10,5 C 10,10 10,10 10,10 L 0,10 Z;M 0,0 L 10,0 C 10,0 5,0 5,5 C 5,10 10,10 10,10 L 0,10 Z;M 0,0 L 0,0 C 0,0 0,0 0,5 C 0,10 0,10 0,10 L 0,10 Z" data-duration="1000" data-easing-in="easeInExpo" data-easing-out="easeOutExpo">
<div class="grid__column">
<div class="grid__item grid__item--auto">
<header class="codrops-header">
<h1 class="codrops-header__title">Item Revealer</h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
<p class="info">Use the arrows or the keyboard to navigate.</p>
</header>
</div>
<div class="grid__item" data-delay="75" data-duration="800">
<div class="grid__img" style="background-image: url(images/5.jpg);"></div>
</div>
</div>
<div class="grid__column">
<div class="grid__item" data-delay="100">
<div class="grid__img" style="background-image: url(images/15.jpg);"></div>
</div>
<div class="grid__item" data-delay="150" data-duration="1200">
<div class="grid__img" style="background-image: url(images/4.jpg);"></div>
</div>
<div class="grid__item" data-delay="300" data-duration="500">
<div class="grid__img" style="background-image: url(images/13.jpg);"></div>
</div>
</div>
<div class="grid__column">
<div class="grid__item grid__item--auto" data-delay="190">
<a class="pater" href="https://goo.gl/rsgZTW">
<h2 class="pater__title" aria-label="PageCloud Web Editor"><img src="images/pagecloud_logo.svg" alt="PageCloud Logo"></h2>
<p class="pater__desc">Take control of your website with features you won't find anywhere else. Find out why PageCloud is the world's most advanced website creator! &rarr;</p>
</a>
</div>
<div class="grid__item" data-delay="250">
<div class="grid__img" style="background-image: url(images/6.jpg);"></div>
</div>
</div>
</div>
<div class="grid grid--vertical grid--style-1" data-path-cover="M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z;M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z;M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z" data-path-uncover="M 10,0 L 0,0 C 0,0 0,0 0,5 C 0,10 0,10 0,10 L 10,10 Z;M 10,0 L 0,0 C 0,0 5,0 5,5 C 5,10 0,10 0,10 L 10,10 Z;M 10,0 L 10,0 C 10,0 10,0 10,5 C 10,10 10,10 10,10 L 10,10 Z" data-duration="1000" data-easing-in="easeInExpo" data-easing-out="easeOutExpo">
<div class="grid__column">
<div class="grid__item">
<div class="grid__img" style="background-image: url(images/3.jpg);"></div>
</div>
<div class="grid__item" data-delay="150">
<div class="grid__img" style="background-image: url(images/12.jpg);"></div>
</div>
</div>
<div class="grid__column">
<div class="grid__item" data-delay="200" data-duration="800">
<div class="grid__img" style="background-image: url(images/2.jpg);"></div>
</div>
</div>
<div class="grid__column">
<div class="grid__item" data-delay="310" data-duration="550">
<div class="grid__img" style="background-image: url(images/8.jpg);"></div>
</div>
<div class="grid__item" data-delay="250">
<div class="grid__img" style="background-image: url(images/9.jpg);"></div>
</div>
<div class="grid__item" data-delay="50" data-duration="950">
<div class="grid__img" style="background-image: url(images/10.jpg);"></div>
</div>
</div>
</div>
<div class="grid grid--vertical grid--style-1" data-path-cover="M 0,10 L 10,10 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z;M 0,10 L 10,10 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 Z;M 0,10 L 10,10 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z" data-path-uncover="M 10,10 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,10 Z;M 10,10 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 L 0,10 Z;M 10,10 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,10 Z" data-duration="1000" data-easing-in="easeInExpo" data-easing-out="easeOutExpo">
<div class="grid__column">
<div class="grid__item">
<div class="grid__img" style="background-image: url(images/17.jpg);"></div>
</div>
<div class="grid__item" data-delay="50">
<div class="grid__img" style="background-image: url(images/16.jpg);"></div>
</div>
<div class="grid__item" data-delay="150" data-duration="650">
<div class="grid__img" style="background-image: url(images/7.jpg);"></div>
</div>
</div>
<div class="grid__column">
<div class="grid__item" data-delay="210" data-duration="800">
<div class="grid__img" style="background-image: url(images/14.jpg);"></div>
</div>
<div class="grid__item" data-delay="150">
<div class="grid__img" style="background-image: url(images/11.jpg);"></div>
</div>
</div>
</div>
<div class="grid grid--vertical grid--style-1" data-path-cover="M 10,0 L 10,10 L 10,10 C 10,10 10,10 10,5 C 10,0 10,0 10,0 Z;M 10,0 L 10,10 L 10,10 C 10,10 5,10 5,5 C 5,0 10,0 10,0 Z;M 10,0 L 10,10 L 0,10 C 0,10 0,10 0,5 C 0,0 0,0 0,0 Z" data-path-uncover="M 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,0 Z;M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z;M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z" data-duration="1100" data-easing-in="easeInExpo" data-easing-out="easeOutExpo">
<div class="grid__column">
<div class="grid__item">
<div class="grid__img" style="background-image: url(images/1.jpg);"></div>
</div>
</div>
</div>
<nav class="grid-nav">
<button class="grid__button grid__button--prev" aria-label="Previous page"><svg class="icon icon--nav-up"><use xlink:href="#icon-nav"></use></svg></button>
<button class="grid__button grid__button--next" aria-label="Next page"><svg class="icon icon--nav-down"><use xlink:href="#icon-nav"></use></svg></button>
</nav>
</div>
</main>
<script src="js/anime.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script>
		(function() {
			new GridSlideshow(document.querySelector('.grid-pages'));
		})();
		</script>
</body>
</html>
